<template>
	<view class="con-warp">
		<div class="navTitle" :style="{ top: topHeight + 'rpx' }">铁建投城发官方平台</div>
		<div class="navTitle fixed" v-if="showNav">铁建投城发官方平台</div>
		<view class="indexSwiper">
			<u-swiper :list="banner_list" :autoplay="true" :radius="0" imgMode="scaleToFill" keyName="thumb"
				height="500" bgColor="#ffffff" @click="navigateToPage">
			</u-swiper>
		</view>

		<view class="within">
			<!-- 搜索框 -->
			<view class="search_top">
				<span @click="show_select_city = true" class="search_left">{{city_name}} <u-icon class="icon" size="8"
						name="arrow-down-fill"></u-icon></span>
				<!-- 添加上阴影 -->
				<u-search class="search_form" placeholder="请输入项目名称" v-model="keyword" bgColor="#fff" :animation="false"
					:showAction="false" @search="searchHouse()"></u-search>
			</view>
			<!-- <uni-nav-var left-icon="back" title=""></uni-nav-var> -->
			<view class="three_list">
				<view>
					<navigator url="/pages/good/good" open-type="switchTab">
						<image class="one" src="/static/icon_1.png" alt="">
						</image>
						<span>楼盘中心</span>
					</navigator>
				</view>
				<view>
					<navigator url="/pages/index/activity_list" open-type="navigate">
						<image class="one" src="/static/icon_2.png" alt="">
						</image>
						<span>热门活动</span>
					</navigator>
				</view>
				<view>
					<navigator url="/pages/index/matrix" open-type="navigate">
						<image class="one" src="/static/icon_3.png" alt="">
						</image>
						<span>公众号矩阵</span>
					</navigator>
				</view>
			</view>
			<view class="city">
				<!-- <navigator url="map" open-type="navigate">
				</navigator> -->
				<image class="one" :src="mapPics" alt=""></image>
			</view>
			<h4 class="public_title">
				精选好房
				<navigator class="release" url="/pages/good/good" open-type="switchTab">
					更多&gt&gt
				</navigator>
			</h4>

			<view class="home_list">
				<scroll-view class="scroll-container" scroll-x show-scrollbar="false" :scroll-with-animation="true"
					@scroll="onScroll">
					<!-- 图片容器 -->
					<view class="image-wrapper">
						<!-- 循环渲染图片 -->
						<view class="image-item" v-for="(item, index) in put_house" :key="index"
							@click="home_list_link(item.id)">
							<image class="image" :src="item.project" mode="scaleToFill" :lazy-load="true"
								@error="imageError(index)"></image>
							<!-- 可选：添加图片描述 -->
							<!-- <view class="image-desc" v-if="item.title">{{ item.title }}</view> -->
							<span class="two">热销中</span>
							<view class="home_text">
								<h2>{{item.title}}</h2>
								<!-- <view class="bottom">
									<span>均价:&nbsp;</span><b class="current">{{item.price}}</b>
								</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="info">
				<image class="two" src="https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/info.jpg" alt="">
				</image>
				<u-notice-bar direction="row" bgColor="#fff" color="#4094d0" :text="notice" speed="50"
					@click="goUrls(quick)"></u-notice-bar>
				<span>
					<navigator url="/pages/index/news_list" open-type="navigate">更多</navigator>
				</span>
			</view>
			<!-- <h4 class="public_title">
				热门活动
				<navigator class="release" url="/pages/index/activity_list">
					更多&gt&gt
				</navigator>
			</h4> -->
			<view class="activity" v-for="(item,idx) in activity" :key="idx" @click="goUrls(item)">
				<image class="one" :src="item.thumb" mode="aspectFit" alt=""></image>
				<view class="title">
					<view class="text">{{item.title}}</view>
					<view class="look">▶点击观看</view>
				</view>
			</view>

			<u-popup :show="show_select_city" @close="close_select_city" @open="open_select_city">
				<view class="search_box">
					<u-search @change="changeSearch" class="search_city" placeholder="搜索城市" actionText="搜索"
						v-model="keyword_1"></u-search>
					<view class="select_name">
						<view class="local_map">
							<view class="city" @click="select_citys()">当前城市：{{city_name}}</view>
							<view class="city_map" @click="getLocation()">定位</view>
						</view>
						<span>热门城市</span>
						<view @click="select_things(item)" v-for="(item,index) in city_box" :key="index">{{item.title}}
						</view>
					</view>
				</view>
			</u-popup>
			<h4 class="public_title">
				项目列表
			</h4>
			<view class="home_list2">
				<view class="home_list_within" v-for="item in home_list" @click="home_list_link(item.id)">
					<view class="home_img">
						<image class="home_img_image" :src="item.drawing" alt="" mode="aspectFill"></image>
					</view>
					<view class="home_text">
						<view class="text_title">
							<h2>{{item.title}}</h2>
							<p v-if="item.price"><span>均价:</span>
								<b>{{item.price}}</b>
							</p>
						</view>
						<p>{{item.address}}</p>
						<view class="home_tags">
							<span>在售</span>
							<view class="tags_li" v-for="(items,idxs) in item.tags" :key="idxs">
								{{items}}
							</view>
						</view>
					</view>
					<!-- 				<view class="icon_top">
						<u-icon class="icon" name="heart" color="#f48359" size="20"></u-icon>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				keyword: '',
				keyword_1: '',
				banner_list: [],
				quick: [],
				notice: "",
				mapPics: "",
				home_list: [],
				activity: [],
				put_house: [],
				show_select_city: false,
				city_name: "郑州市",
				city_id: 0,
				city_box: [],
				indicator: true,
				scrollLeft: 0,
				currentIndex: 0,
				showIndicator: true,
				topHeight: 0,
				showNav: false,
				scrollTop: 0,
				showHeight: 300,
				isIPhoneX: 0
			};
		},
		mounted() {

		},
		onPageScroll(e) {
			// 监听页面滚动
			this.scrollTop = e.scrollTop
			// 控制导航显示/隐藏
			if (this.scrollTop > this.showHeight) {
				this.showNav = true
			} else {
				this.showNav = false
			}
		},
		onLoad() {
			let cityId = uni.getStorageSync('city_id');
			let cityName = uni.getStorageSync('city_name');
			let cacheCity = uni.getStorageSync('cacheCity');
			if (cityId) {
				this.city_id = cityId;
			}
			if (cityName) {
				this.city_name = cityName;
			}
			this.getArea();
			this.getIndex();
			// #ifdef MP-WEIXIN
			if (cacheCity == '') {
				this.getLocation();
			}
			// #endif
			this.isIPhoneX = uni.getSystemInfoSync().safeAreaInsets?.bottom > 0

			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
					// 获取胶囊按钮位置
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					// 计算导航栏高度
					this.navBarHeight = menuButtonInfo.bottom - res.statusBarHeight
					console.log('状态栏高度:', this.statusBarHeight)
					console.log('导航栏高度:', this.navBarHeight)
					if (this.isIPhoneX) {
						this.topHeight = this.navBarHeight * 2 + 25;
					} else {
						this.topHeight = this.navBarHeight * 2 - 5;
					}
				}
			})
		},
		methods: {

			// 监听滚动事件，更新当前索引
			onScroll(e) {
				console.log(e);
				this.scrollLeft = e.detail.scrollLeft;
				// 计算当前显示的主要图片索引
				const itemWidth = uni.upx2px(300); // 每个图片项的宽度
				this.currentIndex = Math.floor(this.scrollLeft / itemWidth) || 0;
			},

			changeSearch(e) {
				console.log(e);
				console.log(this.keyword_1);
				this.getArea();
			},

			searchHouse() {
				if (this.keyword == '') {
					uni.showToast({
						icon: 'none',
						title: "请输入您要搜索的内容"
					})
					return false;
				}
				uni.setStorageSync('keys', this.keyword);
				uni.switchTab({
					url: "/pages/good/good"
				})
			},

			getLocation() {
				console.log(1111111);
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res);
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.request({
							url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=5TNBZ-WCB6W-NUPRX-3265H-WSK5K-LTBMQ`,
							success(ress) {
								if (ress.data.status === 0) {
									console.log(ress);
									console.log('地址已设置', ress.data.result.address_component.city);
									that.city_name = ress.data.result.address_component.city;
									uni.setStorageSync('cacheCity', ress.data.result.address_component
										.city);

									uni.$u.http.post("/getLocation", {
										keys: that.city_name
									}).then((res) => {
										if (res.code == 200) {
											that.city_name = res.data.title;
											that.city_id = res.data.id;
											uni.setStorageSync('city_id', res.data.id);
											uni.setStorageSync('city_name', res.data.title);
										}
									})

								} else {
									console.error('逆地址解析失败', ress.data.message);
								}
							},
							fail() {
								console.error('逆地址解析请求失败');
							}
						});
					}
				});
			},

			goUrls(ele) {
				console.log(ele);
				if (ele.urls) {
					// #ifdef MP-WEIXIN
					//const wx = uni.$mp.weixin;
					wx.openOfficialAccountArticle({
						url: ele.urls, // 此处填写公众号文章连接
						success: res => {},
						fail: res => {}
					})
					// #endif
					// #ifdef H5
					window.open(ele.urls, '_blank');
					// #endif

				} else {
					uni.navigateTo({
						url: "/pages/index/news_det?id=" + ele.id
					})
				}
			},

			getIndex() {
				uni.$u.http.post("/getIndex", {
					city_id: this.city_id
				}).then((res) => {
					if (res.code == 200) {
						this.banner_list = res.data.advert;
						this.quick = res.data.quick;
						this.notice = res.data.quick.title;
						this.mapPics = res.data.map.thumb;
						this.home_list = res.data.house;
						this.activity = res.data.article;
						this.put_house = res.data.put_house;
						console.log(this.quick);
					}
				})
			},

			getArea() {
				uni.$u.http.post("/getArea", {
					keys: this.keyword_1
				}).then((res) => {
					if (res.code == 200) {
						this.city_box = res.data;
					}
				})
			},

			navigateToPage(item) {
				console.log(item);
				let urls = this.banner_list[item].urls;
				let type = this.banner_list[item].urls_type;
				console.log(type);
				if (type == 0) {
					// #ifdef MP-WEIXIN
					wx.openOfficialAccountArticle({
						url: urls, // 此处填写公众号文章连接
						success: res => {},
						fail: res => {}
					})
					// #endif
					// #ifdef H5
					window.open(urls, '_blank');
					// #endif

				} else {
					uni.navigateTo({
						url: urls
					})
				}
			},

			three_list_url: function(url) {
				uni.switchTab({
					url: url
				})
			},
			activity_link: function(url) {
				uni.navigateTo({
					url: url
				})
			},
			home_list_link: function(ids) {
				uni.navigateTo({
					url: "/pages/good/good_det?id=" + ids
				})
			},
			open_select_city() {
				this.keyword_1 = "";
				this.getArea();
				// console.log('open');
			},
			close_select_city() {
				this.show_select_city = false
				// console.log('close');
			},
			select_citys() {
				this.show_select_city = false;
				this.getIndex();
			},
			select_things(item) {
				console.log(item);
				this.show_select_city = false;
				this.city_name = item.title;
				this.city_id = item.id;
				uni.setStorageSync('city_id', item.id);
				uni.setStorageSync('city_name', item.title);
				this.getIndex();
				// uni.switchTab({
				// 	url: "/pages/good/good"
				// })
			}
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;

		.con-warp {
			position: relative;

			.navTitle {
				position: absolute;
				top: 60rpx;
				color: #f7f7f7;
				z-index: 1000;
				width: 94%;
				padding: 0 3%;
				font-size: 30rpx;
			}

			.fixed {
				position: fixed;
				top: 0px;
				background-color: #ffffff;
				color: #333;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}


	.indexSwiper {
		width: 100%;
		height: 1000rpx;
		position: relative;
	}

	.swiper {
		height: 450rpx;
	}

	.search_top {
		background: #ffffff;
		border-radius: 50rpx;
		padding-left: 30rpx;
		margin: 20rpx 20rpx 0rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		line-height: 80rpx;
		width: 91%;
		border: 1px solid #ececec;
		// margin-bottom: 20rpx;

		.search_left {
			position: relative;
			width: 18%;
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;

			.icon {
				margin-left: 20rpx;
			}

			&:after {
				content: '';
				height: 30px;
				width: 1px;
				background: rgba(144, 147, 153, 0.3);
				position: absolute;
				right: -20rpx;
				top: 6px;
			}
		}

		.search_form {
			background: transparent;

			.u-search__content {
				background-color: transparent !important;
			}
		}

		.icon {
			display: inline-block;
		}
	}

	.within {
		position: relative;
		top: -120rpx;
		background-color: #f8f8f8;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 0 20rpx 20rpx;
		display: flex;
		flex-direction: column;

		.three_list {
			padding: 40rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			view {
				width: 30%;
				text-align: center;
			}

			.one {
				width: 60rpx;
				height: 55rpx;
			}

			span {
				display: block;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}

		.info {
			margin: 30rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			//box-shadow:2px 2px 2px rgba(0,0,0,.2);
			padding: 8rpx 30rpx;
			box-shadow: -1px 0 12px rgba(0, 0, 0, .05), 1px 0 12px rgba(0, 0, 0, .05), 0 -1px 12px rgba(0, 0, 0, .05), 0 1px 12px rgba(0, 0, 0, .05);
			border-radius: 48rpx;
			background: #fff;
			align-items: center;

			.one {
				height: 60rpx;
				width: 60rpx;
				padding-right: 20rpx;
				border-right: 2rpx solid #333;
			}

			.two {
				width: 46rpx;
				height: 46rpx;
			}

			span {
				width: 80rpx;
				font-size: 28rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 20rpx;
				display: inline-block;
				border-left: 2rpx solid #e4e4e4;
				color: #b1b1b1;
			}
		}

		.city {
			.one {
				width: 100%;
				margin: 10rpx 0 10rpx;
				height: 520rpx;
			}
		}

		.public_title {
			line-height: 80rpx;
			font-size: 36rpx;
			font-weight: bold;

			.release {
				float: right;
				color: #999;
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.home_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 10px;
			background: #fff;
			border-radius: 10px;
			overflow-x: auto;

			view.home_list_within {
				border-radius: 20rpx;
				border: 2rpx solid #aebcbf;
				position: relative;
				overflow: hidden;
				margin-right: 20rpx;

				.one {
					width: 100%;
					height: 300rpx;
				}

				span.two {
					position: absolute;
					right: 0;
					top: 12rpx;
					background: #fe8f33;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 24rpx;
					line-height: 42rpx;
					width: 130rpx;
					border-bottom-left-radius: 30rpx;
				}

				.home_text {
					padding: 12rpx 18rpx;

					h2 {
						font-size: 28rpx;
						line-height: 66rpx;
						border-bottom: 2rpx solid #ccc;
						font-weight: bold;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 这里设置为2行 */
						-webkit-box-orient: vertical;
						/* 溢出隐藏 */
						overflow: hidden;
						/* 可选：设置文本溢出省略号 */
						text-overflow: ellipsis;
					}

					.bottom {
						margin-top: 12rpx;
						font-size: 20rpx;
						display: flex;
						flex-direction: row;

						span {
							width: 22%;
						}

						.current {
							color: #f05b21;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 16px;
						}

						b {
							width: 78%;
							/* 限制显示的行数 */
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 这里设置为2行 */
							-webkit-box-orient: vertical;
							/* 溢出隐藏 */
							overflow: hidden;
							/* 可选：设置文本溢出省略号 */
							text-overflow: ellipsis;
							font-weight: normal;
						}
					}

					p:nth-child(3) {
						height: 96rpx;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					p:nth-child(2) span {
						font-size: 26rpx;
					}
				}
			}
		}

		.activity {
			padding: 12rpx 0rpx;
			position: relative;

			.one {
				width: 100%;
				height: 290rpx;
				border-radius: 16rpx;
				box-shadow: -1px 0 12px rgba(0, 0, 0, .1), 1px 0 12px rgba(0, 0, 0, .1), 0 -1px 12px rgba(0, 0, 0, .1), 0 1px 12px rgba(0, 0, 0, .1);
			}

			.title {
				padding: 5px 3%;
				width: 94%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: absolute;
				bottom: 10px;

				.text {
					font-size: 12px;
					color: #ffffff;
				}

				.look {
					font-size: 12px;
					color: #ffffff;
				}
			}
		}

		.search_box {
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			padding: 60rpx 0;

			.search_city {
				padding: 0 60rpx;
			}

			.select_name {
				font-size: 24rpx;

				.local_map {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 0;
					padding-bottom: 0;
					padding: 10px 40rpx 10px 100rpx;

					.city {
						padding: 0;
						line-height: 52rpx;
					}

					.city_map {
						padding: 0;
						border: 1rpx solid #b1b1b1;
						height: 52rpx;
						line-height: 52rpx;
						padding: 0 16rpx;
						border-radius: 5px;
					}
				}

				view {
					padding: 20rpx 100rpx;
					margin: 20rpx 0;
				}

				span {
					background: #f4f4f4;
					display: block;
					margin: 20rpx 0;
					padding: 20rpx 100rpx;
					color: #ccc;
				}
			}
		}
	}

	.home_list2 {
		display: flex;
		flex-direction: column;

		view.home_list_within {
			border-radius: 8rpx;
			// background: red;
			box-shadow: 1px 0px 8px 3px rgba(0, 0, 0, 0.25);
			box-sizing: border-box;
			margin: 30rpx 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 0 10rpx;

			.home_img {
				width: 100%;
				position: relative;

				.home_img_image {
					width: 100%;
					height: 306rpx;
					border-radius: 12rpx;
				}

				span {
					position: absolute;
					left: 0;
					top: 0;
					background: #fe8f33;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 20rpx;
					line-height: 36rpx;
					width: 120rpx;
					border-bottom-right-radius: 30rpx;
				}
			}

			.home_text {
				// width: calc(100vw - 300rpx);
				padding: 0 30rpx;

				.text_title {
					border-bottom: 1rpx solid #d0e0e3;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					align-items: center;

					h2 {
						width: 40%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding-bottom: 0;
					}
				}

				.home_tags {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					padding: 10rpx 0;

					>span {
						background: #8b271a;
						font-weight: 500;
						font-size: 12px;
						margin-right: 16rpx;
						padding: 4rpx 12rpx;
						border-radius: 6rpx;
						color: #fff;
						margin-bottom: 16rpx;
					}

					.tags_li {
						background-color: #a8b6c4;
						font-size: 12px;
						color: #fff;
						margin-right: 16rpx;
						padding: 4rpx 12rpx;
						border-radius: 6rpx;
						margin-bottom: 16rpx;
					}
				}

				h2 {
					font-size: 32rpx;
					font-weight: bold;
					padding-bottom: 20rpx;
					line-height: 45rpx;
				}

				p {
					// margin-top: 10rpx;
					line-height: 42rpx;
					font-size: 24rpx;
					display: flex;
					flex-direction: row;

					b {
						color: #f05b21;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				p:nth-child(3) {
					line-height: 33rpx;
					height: 66rpx;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				p:nth-child(2) span {
					font-size: 28rpx;
				}
			}

			.icon_top {
				padding-top: 20rpx;
			}

			.icon {
				height: 40rpx;
			}

			:last-child {
				border-bottom: none;
			}
		}
	}


	/* 横向滚动容器 */
	.scroll-container {
		width: 100%;
		white-space: nowrap;
		/* 关键：确保内容不换行 */
		padding: 10rpx 0;
	}

	/* 图片容器 */
	.image-wrapper {
		display: flex;
		gap: 20rpx;
		/* 图片之间的间距 */
		padding: 10rpx 0;
	}

	/* 单个图片项 */
	.image-item {
		width: 288rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
		border: 1px solid #ccc;
		border-radius: 10rpx;

		.two {
			position: absolute;
			right: 0;
			top: 12rpx;
			background: #fe8f33;
			text-align: center;
			color: #fff;
			display: block;
			font-size: 24rpx;
			line-height: 42rpx;
			width: 130rpx;
			border-bottom-left-radius: 30rpx;
		}

		.home_text {
			padding: 0 10rpx;

			h2 {
				font-size: 24rpx;
				line-height: 66rpx;
				// border-bottom: 2rpx solid #ccc;
				font-weight: normal;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 这里设置为2行 */
				-webkit-box-orient: vertical;
				/* 溢出隐藏 */
				overflow: hidden;
				/* 可选：设置文本溢出省略号 */
				text-overflow: ellipsis;
			}

			.bottom {
				margin-top: 12rpx;
				font-size: 20rpx;
				display: flex;
				flex-direction: row;

				span {
					width: 22%;
				}

				.current {
					color: #f05b21;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 16px;
				}

				b {
					width: 78%;
					/* 限制显示的行数 */
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 这里设置为2行 */
					-webkit-box-orient: vertical;
					/* 溢出隐藏 */
					overflow: hidden;
					/* 可选：设置文本溢出省略号 */
					text-overflow: ellipsis;
					font-weight: normal;
				}
			}

			p:nth-child(3) {
				height: 96rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			p:nth-child(2) span {
				font-size: 26rpx;
			}
		}
	}

	/* 图片样式 */
	.image {
		width: 288rpx;
		height: 307rpx;
		border-radius: 10rpx;
		object-fit: cover;
		/* 保持图片比例并填充容器 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 图片描述 */
	.image-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-top: 10rpx;
		white-space: normal;
		/* 允许描述文字换行 */
		padding: 0 10rpx;
	}
</style>